.slideshow {

     position: relative;

     display: block;

     width: 100%;

     height: 100%;

     height: 100vh;

     margin: 0 auto;

     /* visibility: hidden; */

     overflow: hidden;

 }



 .slideshow ul.navigation {

     position: absolute;

     display: block;

     width: 440px;

     height: 440px;

     padding: 0;

     margin: 0;

     left: -120px;

     bottom: 5%;

     z-index: 10;

 }



 .slideshow ul.navigation li.navigation-item {

     position: absolute;

     display: inline-block;

     overflow: hidden;

     width: 120px;

     height: 120px;

     padding: 10px;

     text-align: center;

     cursor: pointer;

     border-radius: 50%;

     transition: border 0.6s ease-in-out;

 }



 .slideshow ul.navigation li.navigation-item .rotate-holder {

     position: fixed;

     display: block;

     width: 0;

     height: 0;

     left: -9999px;

     top: -9999px;

 }



 .slideshow ul.navigation li.navigation-item .background-holder {

     position: absolute;

     display: block;

     width: 100%;

     height: 100%;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     border-radius: 50%;

     background-repeat: no-repeat;

     background-position: center center;

     -webkit-background-size: cover;

     -moz-background-size: cover;

     -o-background-size: cover;

     background-size: cover;

     opacity: 1;

     visibility: visible;

     transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;

 }



 .slideshow ul.navigation li.navigation-item:hover .background-holder {

     opacity: 0.75;

 }



 .slideshow ul.navigation li.navigation-item.active .background-holder {

     opacity: 1;

     /*visibility:hidden;*/

 }



 .slideshow .detail {

     position: absolute;

     display: block;

     width: 100%;

     height: 100%;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     z-index: 8;

 }



 .slideshow .detail .detail-item {

     position: absolute;

     display: block;

     width: 100%;

     height: 100%;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     opacity: 0;

     visibility: hidden;

     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

 }



 .slideshow .detail .detail-item .background {

     position: absolute;

     display: block;

     width: 100%;

     width: calc(100% + 100px);

     height: 100%;

     height: calc(100% + 100px);

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     overflow: visible;

     background-repeat: no-repeat;

     background-position: center center;

     -webkit-background-size: cover;

     -moz-background-size: cover;

     -o-background-size: cover;

     background-size: cover;

     z-index: 1;

 }



 .slideshow .detail .detail-item.active {

     opacity: 1;

     visibility: visible;

 }